<template>
    <div class="home-recommend">
       <div class="recommend-title">
            <div class="title-desc">周末去哪儿</div>
       </div>
       <ul>
            <li class="item border-bottom" v-for="item in weekendList" :key="item.id">
                <div class="img-wrapper">
                  <img class="item-img" :src="item.imgUrl">
                </div>
                
                <div class="desc-wraper">
                    <p class="right-top">{{item.title}}</p>
                    <p class="right-bottom">{{item.desc}}</p>
                </div>
            </li>
       </ul>
    </div>
</template>

<script>
export default {
    name:'HomeWeekend',
    props:{
        weekendList:Array
    }
}
</script>

<style lang="stylus" scoped>
    .home-recommend
        margin-top :0.3rem
        position: relative
        .recommend-title
            height :0
            padding-bottom:10%
            background :#eee
            .title-desc
                text-indent:.2rem 
                height :0.7rem
                line-height :0.7rem
                font-family :'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
                font-size :.36rem
        .item
            overflow: hidden
            height :0
            padding-bottom :51%
            margin-top :.1rem
            width :100%
            .img-wrapper
                height :0
                padding-bottom :37%
                .item-img
                   width:100%
                    
            .desc-wraper
                position:absolute
                left :.2rem
                bottom:.2rem
                
                .right-top
                    font-weight bold
                    line-height :110%
                .right-bottom
                    margin-top :.2rem
                    color :#808080
                    line-height :110%
                    font-size:.2rem
</style>
